<template>
	<view class="order-detail">
		<!-- 订单状态 -->
		<view class="status-section">
			<text class="status">{{ orderStatusText }}</text>
			<text class="amount">¥{{ orderInfo.totalAmount }}</text>
		</view>

		<!-- 场馆信息 -->
		<view class="venue-section">
			<text class="venue-name">{{ orderInfo.venueName }}</text>
			<text class="venue-address">{{ orderInfo.venueAddress }}</text>
		</view>

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-item">
				<text class="label">预订人</text>
				<text class="value">{{ orderInfo.name }}</text>
			</view>
			<view class="info-item">
				<text class="label">预订人电话</text>
				<text class="value">{{ orderInfo.phone }}</text>
			</view>
			<view class="info-item">
				<text class="label">订单编号</text>
				<text class="value">{{ orderInfo.id }}</text>
			</view>
			<view class="info-item">
				<text class="label">预订日期</text>
				<text class="value">{{ formatDate(orderInfo.orderDate) }}</text>
			</view>
			<view class="info-item">
				<text class="label">下单时间</text>
				<text class="value">{{ orderInfo.createTime }}</text>
			</view>
			<view class="info-item">
				<text class="label">支付时间</text>
				<text class="value">{{ orderInfo.paySuccessTime || '--' }}</text>
			</view>
		</view>

		<!-- 预订场地列表 -->
		<view class="items-section">
			<text class="section-title">预订场地</text>
			<view class="item" v-for="(item, index) in orderInfo.orderItems" :key="index">
				<view class="item-info">
					<text class="spec-name">{{ item.venueSpecName }}</text>
					<text class="time-slot">{{ item.timeSlot }}</text>
				</view>
				<text class="price">¥{{ item.price }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrder
	} from '@/api/order/order.js'

	export default {
		data() {
			return {
				orderInfo: {}
			}
		},

		computed: {
			orderStatusText() {
				const statusMap = {
					'SUCCESS': '支付成功',
					'REFUND': '已退款',
					'NOTPAY': '未支付',
					'CLOSED': '已关闭',
					'REVOKED': '已撤销',
					'USERPAYING': '支付中',
					'PAYERROR': '支付失败'
				}
				return statusMap[this.orderInfo.orderStatus] || '未知状态'
			}
		},

		onLoad(options) {
			if (options.id) {
				this.getOrderDetail(options.id)
			}
		},

		methods: {
			formatDate(dateStr) {
				if (!dateStr) return '--'
				// 只保留年月日
				return dateStr.split(' ')[0]
			},

			async getOrderDetail(id) {
				try {
					const res = await getOrder(id)
					if (res.code === 200) {
						this.orderInfo = res.data
					}
				} catch (error) {
					console.error('获取订单详情失败:', error)
					uni.showToast({
						title: '获取订单详情失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: env(safe-area-inset-bottom);

		.status-section {
			background: #fff;
			padding: 40rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.status {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.amount {
				font-size: 36rpx;
				color: #ff6b35;
				font-weight: bold;
			}
		}

		.venue-section {
			background: #fff;
			padding: 30rpx;
			margin-top: 20rpx;

			.venue-name {
				font-size: 32rpx;
				color: #333;
				margin-bottom: 10rpx;
			}

			.venue-address {
				font-size: 26rpx;
				color: #666;
			}
		}

		.order-info {
			background: #fff;
			padding: 30rpx;
			margin-top: 20rpx;

			.info-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.label {
					color: #666;
					font-size: 28rpx;
				}

				.value {
					color: #333;
					font-size: 28rpx;
				}
			}
		}

		.items-section {
			background: #fff;
			padding: 30rpx;
			margin-top: 20rpx;

			.section-title {
				font-size: 32rpx;
				color: #333;
				margin-bottom: 20rpx;
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				.item-info {
					.spec-name {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 8rpx;
					}

					.time-slot {
						font-size: 26rpx;
						color: #666;
					}
				}

				.price {
					font-size: 32rpx;
					color: #ff6b35;
				}
			}
		}
	}
</style>